<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-首页</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
	<div class="header_con"> <!-- 顶部标题的容器 -->
		<div class="header">
			<div class="welcome fl">欢迎来到天天生鲜！</div>
			<div class="user_info fr">
				<div class="user_login_link fl"> <!-- <div class="user_login_link fl"> user_info_fr整体右浮动，它的子元素又每个左浮动 -->
					<a href="#">登录</a>
					<span>|</span>
					<a href="#">注册</a>
				</div>
				<div class="user_welcome fl">欢迎您：<em>Jack</em></div>
				<div class="user_shopping fl"> <!-- 如果在后面加入了style='display:none',那么该元素会被隐藏，block就是开启 -->
					<span>|</span>
					<a href="#">我的购物车</a>
					<span>|</span>
					<a href="#">我的订单</a>
				</div>
			</div>

		</div>
	</div>

	<div class="logo_bar">
		<div class="logo fl">
			<a href="#"><img src="images/logo.png"></a>
		</div>
		<div class="search fl">
			<input type="text" name="" placeholder="搜索" class="input_text fl">
			<input type="button" name="" value="搜索" class="input_btn fr">
		</div>
		<div class="chart fr">
			<a href="#" class="fl">我的购物车</a>
			<span class="fr">10</span>
		</div> 
	</div>
	<div class="sub_menu_con"> <!-- 这里多设置了一个标签是要作出绿色的下划线 -->
		<div class="sub_menu">
			<h1 class="fl">全部商品分类</h1>
			<ul class="fl">
				<li><a href="">首页</a></li>

				<li><a href="">手机生鲜</a></li>
				<li><a href="">抽奖</a></li>
			</ul>
		</div>
	</div>

	<div class="center_con">
		<ul class="main_menu fl">
			<li><a href="" class="fruit">新鲜水果</a></li>
			<li><a href=""  class="seafood">海鲜水产</a></li>
			<li><a href="" class="meta">猪牛羊肉</a></li>
			<li><a href="" class="egg">禽类蛋品</a></li>
			<li><a href="" class="vegatable">新鲜蔬菜</a></li>
			<li><a href="" class="ice">速冻食品</a></li>
		</ul>
		<div class="slide_con fl">
			<ul class="slide">
				<li><a href=""><img src="images/slide.jpg" alt="幻灯片" /></a></li>
			</ul>

			<!-- 在图片上插入图片叠加，只能使用定位来做 -->
			<div class="prev"></div>
			<div class="next"></div>

			<ul class="points">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div class="adv fl">
			<a href=""><img src="images/adv01.jpg" alt="广告" /></a>
			<a href=""><img src="images/adv02.jpg" alt="广告" /></a>
		</div>
	</div>
	<div class="common_model">
		<div class="common_title">
			<h3 class="fl">新鲜水果</h3>
			<ul class="fl"> 
				<li><span>|</span></li>
				<li><a href="#">鲜芒</a></li>
				<li><a href="#">加州提子</a></li>
				<li><a href="#">亚马逊牛油果</a></li>
			</ul>
			<a href="#" class="more fr">查看更多 &gt;</a>
		</div>
		<div class="common_goods_list">
			<div class="good_banner fl"><img src="images/banner01.jpg" alt="商品banner"></div>
			<ul class="goods_list fl">  <!-- 此处需左浮动，否则影响后面的无法进行浮动 -->
				<li>
					<h4>草莓</h4>
					<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
					<p>￥ 38.00</p>
				</li>
				<li>
					<h4>草莓</h4>
					<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
					<p>￥ 38.00</p>
				</li>
				<li>
					<h4>草莓</h4>
					<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
					<p>￥ 38.00</p>
				</li>
				<li>
					<h4>草莓</h4>
					<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
					<p>￥ 38.00</p>
				</li>
			</ul>
		</div>
	</div>
	<div class="common_model">
		<div class="common_title">
			<h3 class="fl">新鲜水果</h3>
			<ul class="fl"> 
				<li><span>|</span></li>
				<li><a href="#">鲜芒</a></li>
				<li><a href="#">加州提子</a></li>
				<li><a href="#">亚马逊牛油果</a></li>
			</ul>
			<a href="#" class="more fr">查看更多 &gt;</a>
		</div>
		<div class="common_goods_list">
			<div class="good_banner fl"><img src="images/banner01.jpg" alt="商品banner"></div>
			<ul class="goods_list fl">  <!-- 此处需左浮动，否则影响后面的无法进行浮动 -->
				<li>
					<h4>草莓</h4>
					<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
					<p>￥ 38.00</p>
				</li>
				<li>
					<h4>草莓</h4>
					<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
					<p>￥ 38.00</p>
				</li>
				<li>
					<h4>草莓</h4>
					<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
					<p>￥ 38.00</p>
				</li>
				<li>
					<h4>草莓</h4>
					<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
					<p>￥ 38.00</p>
				</li>
			</ul>
		</div>
	</div>
	<div class="common_model">
		<div class="common_title">
			<h3 class="fl">新鲜水果</h3>
			<ul class="fl"> 
				<li><span>|</span></li>
				<li><a href="#">鲜芒</a></li>
				<li><a href="#">加州提子</a></li>
				<li><a href="#">亚马逊牛油果</a></li>
			</ul>
			<a href="#" class="more fr">查看更多 &gt;</a>
		</div>
		<div class="common_goods_list">
			<div class="good_banner fl"><img src="images/banner01.jpg" alt="商品banner"></div>
			<ul class="goods_list fl">  <!-- 此处需左浮动，否则影响后面的无法进行浮动 -->
				<li>
					<h4>草莓</h4>
					<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
					<p>￥ 38.00</p>
				</li>
				<li>
					<h4>草莓</h4>
					<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
					<p>￥ 38.00</p>
				</li>
				<li>
					<h4>草莓</h4>
					<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
					<p>￥ 38.00</p>
				</li>
				<li>
					<h4>草莓</h4>
					<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
					<p>￥ 38.00</p>
				</li>
			</ul>
		</div>
	</div>	
	<div class="footer">
		<div class="links">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>
		</div>
		<p></p>
	</div>
</body>
</html>